import router, { asyncRoutes } from '@/router'
import store from '@/store'
// 虚拟进度条
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'

// 路由守卫
// 我知道的路由守卫有很多，常用的就是全局的路由守卫，beforeEach用的最多，还有 组件内的，路由独享的，等等很多钩子函数，但我记不住单词了，一般就是去vue-router官网看一下就可以写，很简单 ---- 吹牛
// 全局路由守卫beforeEach  afterEach， 全局钩子函数（在特定是时机，自动执行的函数）
// 组件内的钩子函数 beforeRouteEnter。 （代码就写在data methods 同级就可以了）
// 路由独享守卫 beforeEnter （代码写在路由 配置里面 和path componets 同级）

const whiteList = ['/login']

// 跳转到一个页面之前 执行的钩子函数  A --> B  A开始跳转，还没有到B
router.beforeEach(async(to, from, next) => {
  // console.log(11111)
  // to 去到什么页面, from 从什么页面跳转过来, next 路由放行的函数
  nprogress.start()
  // 这里怎么样判断有没有登录？
  if (store.state.user.token) {
    // 如果用户已经登录了， 用户手动输入 login去访问登录界面
    if (whiteList.includes(to.path)) {
      next('/')
      nprogress.done()
    } else {
      // 最终选择的是在这个else分支里面 发起 获取用户信息的请求的
      // const res = await getProfileRequest()
      // this.$store.commit(xxx, res.data)
      // 如果一个请求，返回的数据需要在vuex里面再保存以下，那么这个请求就需要在vuex的actions里面去发送，减少代码的复杂度
      // 这个else分支，是每个路由切换的时候，都会走这里来，如果直接写发请求，就会浪费很多性能
      // 如果vuex里面已经 存在了 userInfo的信息，那我们就不要在发了
      // 判断一个对象是否为空对象？ Object.keys()
      // if (!store.state.user.userInfo.userId) {
      if (!store.getters.userId) {
        // if (Object.keys(store.state.user.userInfo).length === 0) {
        // console.log(1)
        // 下面这里加不加 await 打印顺序不一样
        // js 是单线程异步非阻塞语言
        // 获取用户信息  然后获取动态路由
        const res = await store.dispatch('user/setUserInfoAction')
        console.log(res, 666666666)
        // 最后得到的是一个过滤之后的 动态路由组成的数组
        const fileterRotuers = asyncRoutes.filter((item) =>
          res?.roles?.menus.includes(item.name)
        )
        // const fileterRotuers = asyncRoutes.filter(item => ["department", "role", "permission"].includes(item.name))
        console.log(JSON.stringify(asyncRoutes), 2222222)
        store.commit('user/setRoutesMutations', [
          ...fileterRotuers,
          { path: '*', redirect: '/404', hidden: true }
        ])
        router.addRoutes([
          ...fileterRotuers,
          { path: '*', redirect: '/404', hidden: true }
        ])
        console.log(fileterRotuers, 8888888888)
        next(to.path)
      } else {
        next()
      }
    }
  } else {
    // 这个if就是如果没有登陆过， 用户在访问 login页面， 或者 访问首页的情况
    // if (to.path === '/login' || to.path === '/404' || to.path === '/405' || to.path === '/404') {
    if (whiteList.includes(to.path)) {
      next()
    } else {
      // 这里是访问其他页面的逻辑，别入首页，订单，组织页面等等，需要登录才能看的页面
      next('/login')
      nprogress.done()
    }
  }
})

// 跳转到一个页面之后执行的钩子函数 A --> B  已经到了B页面
router.afterEach(() => {
  nprogress.done()
  // nprogress.set(0.4)
  // nprogress.inc()
})
